<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            阳光成单系统
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="./css/x-admin.css" media="all">
        <script src="./js/jquery.min.js"></script>
    </head>
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>会员管理</cite></a>
              <a><cite>问题/资讯列表</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
        </div>
        <div class="x-body">
        <div class="demoTable  x-center"">    
			用户名：
			  <div class="layui-inline">
			    <input class="layui-input" name="par1" placeholder="请输入标题关键字" id="par1" autocomplete="off">
			  </div>
			 回复状态：
			  <div class="layui-inline layui-form x-center" style="margin-top: 15px; margin-bottom: 15px;" >
			 <!--  <div class="layui-form x-center" style="margin-top: 15px;"> -->
                    <div class="layui-input-inline" style="width:120px;text-align: left">
                        <select  name="par2" id="par2" lay-verify="required" lay-filter="informationcategory" >
                          <option value="">--请选择--</option>
                          <option value="已回复">已回复</option>
                          <option value="未回复">未回复</option>
                        </select>
                    </div>
</div> 
			  <button class="layui-btn" data-type="reload">搜索</button>
			</div>
           <!--  <form class="layui-form x-center" action="" style="width:800px">
                <div class="layui-form-pane" style="margin-top: 15px;">
                  <div class="layui-form-item">
                    <label class="layui-form-label">日期范围</label>
                    <div class="layui-input-inline">
                      <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
                    </div>
                    <div class="layui-input-inline">
                      <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
                    </div>
                    <div class="layui-input-inline">
                      <input type="text" name="username" id="username"  placeholder="标题" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width:80px">
                        <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                  </div>
                </div> 
            </form> -->
            <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button>
            <button class="layui-btn" onclick="huifu()"><i class="layui-icon">&#xe608;</i>回复</button><span class="x-right" style="line-height:40px">共有数据：88 条</span></xblock>
            <table class="layui-table" lay-filter='test' id="demo">
              
            </table>

            <div id="page"></div>
        </div>
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script src="./js/x-layui.js" charset="utf-8"></script>
        <script>
            layui.use('table', function(){
  var table = layui.table;
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 512
    ,url: '../MessageServlet?oid=3' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
    	{type:'checkbox', fixed: 'left'}
      ,{field: 'id', title: '编号', width:80, sort: true, fixed: 'left'}
      ,{field: 'name', title: '用户名', width:80}
      ,{field: 'email', title: '邮箱', width:180}
      ,{field: 'ext1', title: '电话', width:180}
      ,{field: 'content', title: '留言内容', width:180}
      ,{field: 'updateTime', title: '创建时间', width:180}
      ,{field: 'ext2', title: '留言状态', width:180}
      ,{fixed: 'right', width:250, align:'center', toolbar: '#barDemo'}
    ]]
      ,id:"showAll"
  });
  
  var $ = layui.$, active = {
    reload: function(){
      var par1 = $('#par1');  //jquery的写法   根据id获取标题的对象
      var par2 = $('#par2');  //jquery的写法   根据id获取新闻内容的对象
      //执行重载
      table.reload('showAll', {  //showAll是上边查询代码的id
        page: {
          curr: 1 //重新从第 1 页开始
        }
   , method: 'POST'
        ,where: {
         /*  key: {
            id: demoReload1.val()
          } */
          title: par1.val()   //获取标题文本框的值
          ,content:par2.val()  //获取新闻内容文本框的值
        }
      });
    }
  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
/*   <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> */
</script>


<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  
</script>
<script type="text/javascript">
layui.use(["table","jquery"],function(){
  var table=layui.table;
  var $=layui.jquery;
   table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的DOM对象
 
  if(layEvent === 'detail'){ //查看
    
  } else if(layEvent === 'del'){ //删除
      layer.open({
            type : 1,
            content : '<div style="padding: 20px 80px;">确定删除记录?</div>',
            btn : [ '确定', '取消' ],
            yes : function(index, layero) {
                $.ajax({
                    url : "../MessageServlet?oid=4",//数据接口
                    data : {
                        "id" : data.id
                    },
                    dataType : "text",
                    success : function(r) {
                        if(r>0){
                            layer.msg("删除成功！");
                           obj.del();
                           layer.close(index);
                           table.reload("demo");
                        }else{
                            layer.msg("删除失败！");
                        }
                    },
                    error : function() {
                    }
                });
            }
        });

  } else if(layEvent === 'edit'){ //编辑
 
  }
});
})
  
</script>
<script type="text/javascript">
function delAll(){

var arr = layui.table.checkStatus('showAll').data; //获取当前行的数据object类型
//alert(arr[0].id);   取值案例
var temp = ""; 
for(var i=0;i<arr.length;i++){//用javascript的for/in循环遍历对象的属性
    temp +=arr[i].id+",";
}
//alert(temp);//已经得到选中行的所有id
   layer.open({
            type : 1,
            content : '<div style="padding: 20px 80px;">确定删除记录?</div>',
            btn : [ '确定', '取消' ],
            yes : function(index, layero) {
                $.ajax({
                    url : "../MessageServlet?oid=5",//数据接口
                    data : {
                        "temp" : temp
                    },
                    dataType : "text",
                    success : function(r) {
                        if(r>0){
                            layer.msg("删除成功！");
                         window.location.href="javascript:location.replace(location.href)";
                        }else{
                            layer.msg("删除失败！");
                        }
                    },
                    error : function() {
                    }
                });
            }
        });  
  /*  layer.open({
            type : 1,
            content : '<div style="padding: 20px 80px;">确定删除记录?</div>',
            btn : [ '确定', '取消' ],
            yes : function(index, layero) {
                $.ajax({
                    url : "../MessageServlet?oid=5",//数据接口
                    data : {
                        "temp" : temp
                    },
                    dataType : "text",
                    success : function(r) {
                        if(r>0){
                            layer.msg("删除成功！");
                         window.location.href="javascript:location.replace(location.href);"
                        }else{
                            layer.msg("删除失败！");
                        }
                    },
                    error : function() {
                    }
                });
                }
        });  */
}
//回复
function huifu(){

var arr = layui.table.checkStatus('showAll').data; //获取当前行的数据object类型
//alert(arr[0].id);   取值案例
var temp = ""; 
for(var i=0;i<arr.length;i++){//用javascript的for/in循环遍历对象的属性
    temp +=arr[i].id+",";
}
//alert(temp);//已经得到选中行的所有id
   layer.open({
            type : 1,
            content : '<div style="padding: 20px 80px;">确定回复?</div>',
            btn : [ '确定', '取消' ],
            yes : function(index, layero) {
                $.ajax({
                    url : "../MessageServlet?oid=6",//数据接口
                    data : {
                        "temp" : temp
                    },
                    dataType : "text",
                    success : function(r) {
                        if(r>0){
                            layer.msg("回复成功！");
                         window.location.href="javascript:location.replace(location.href)";
                        }else{
                            layer.msg("回复失败！");
                        }
                    },
                    error : function() {
                    }
                });
            }
        });  
        }
</script>
    </body>
</html>